<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 40px;
        }

        .box {
            width: 50vw;
            height: 50vh;
            background-color: red;
            font-size: 20px;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: blue;
            text-indent: 2rem;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="inner">
            这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        </div>
    </div>


    <script>
        // 什么是移动端适配：布局元素 适配不同尺寸、平台的手机屏幕，跟随屏幕尺寸的变化而改变。
        // 为什么要做移动端适配： 适配不同尺寸、平台的手机屏幕，跟随屏幕尺寸的变化而改变。
        // 移动端适配和响应式布局：
        // 1. 移动端适配：适配不同尺寸、平台的手机屏幕(跟随屏幕尺寸的变化而改变的是元素的尺寸)
        // 1.1 移动端适配主流方案： vw/vh rem
        // 2. 响应式布局：根据屏幕大小，动态改变网页的布局，让网页在不同的屏幕下显示不同的样式（跟随屏幕尺寸的变化而改变元素的布局）
        // 2.1 响应式布局主流方案：媒体查询
        // 媒体查询的语法：
        // @media (min-width: 768px) {
        //     .container {
        //         width: 750px;
        //     }
        // }
        // @media (max-width: 768px) {
        //     .container {
        //         width: 750px;
        //     }
        // }


        // 元素的大小是由什么控制的： 像素

        // 手机像素 分辨率 ： 屏幕的物理像素（发光点）
        // css像素 px    ： 逻辑像素 （针对布局的）
        // 联系：在某些PC端页面中 有可能 1逻辑像素=1物理像素
        // 在移动端页面（高清屏） 1逻辑像素往往等于多个物理像素 由DPR来决定
        // DPR 设备像素比（物理像素与逻辑像素的比值 一个逻辑像素由几个发光点组成）



        // 布局 css单位 px rem em vw vh
        // 1. px ： 绝对单位 :不会随着屏幕的变化而改变
        // 2. em rem vw vh rpx ： 相对单位 ：会随着屏幕的变化而改变
        // vw:相对于视口的宽度 1vw=视口宽度的1%
        // vh:相对于视口的高度 1vh=视口高度的1%
        // em:相对于父元素的字体大小（font-size） 1em=1个父元素的字体大小
        // rem:相对于根元素（html）的字体大小 1rem=1个根元素的字体大小





    </script>
</body>

</html>